

$class('GalleryView', Widget, {

	_templateFile: "thtml/GalleryView.html",

	_currentIndex:0,

	_itemCount:0,

	_itemArray: [],

	_width: 780,

	_height: 420,

	_useTimer: true,

	constructor: function( )
	{

	},
	/*
	constructor: function( _, _, width, height, args )
	{
		this._width = width || this._width;
		this._height = height || this._height;
	},
	*/

	create: function(parent)
	{
		this.super(Widget.prototype.create, arguments);
		this._domNode.appendTo(parent);

		this._itemCount = 5;
		this.initGalleryBar(this._itemCount);
		this._useTimer && this.initGalleryTimer();
		return this._domNode;
	},

	initGalleryBar: function(count)
	{
		var galleryBar = this._domNode.find('ul.gallery-bar');
		for (var i = 0; i < count; ++i)
		{
			var number = i + 1;
			var item = $('<li value="' + number + '">' + number + '</li>');
			item.appendTo(galleryBar);
			if (number == 1)
			{
				item.addClass('selected');
			}
		}

		var _this = this;
		this._domNode.delegate('li', 'click', function(){
			var number = $(this).attr('value');
			_this.barItemClicked(number - 1);
		});
	},

	initGalleryTimer: function()
	{
		setInterval($bind(this, function(){
			this.moveNext();
		}), 3500);
	},

	toString: function()
	{
		return "<Widget: 'GalleryView'>";
	},

	addItem: function(item)
	{
		//this._itemCount++;
		console.debug(this._domNode);
		item.create(this._domNode.find('ul.gallery-pane'));

		this._itemArray.push(item);
		return item;
	},

	barItemUpdate: function(index)
	{
		this._domNode.find('li').each(function(){
			var item = $(this);
			if (item.attr('value') != (index + 1))
			{
				item.removeClass('selected');
			}
			else
			{
				item.addClass('selected');
			}
		});
	},

	barItemClicked: function(index)
	{
		this.barItemUpdate(index);
		this.moveTo(index);
		this._currentIndex = index;
	},

	moveNext: function()
	{
		if (this._currentIndex == this._itemCount - 1)
		{
			this._currentIndex = 0;	
		}
		else
		{
			this._currentIndex++;
		}
		this.moveTo( this._currentIndex );
	},

	moveTo: function(index)
	{
		this.barItemUpdate(index);
		var pane = this._domNode.find('ul.gallery-pane');
		pane.animate({
	      	"left": -this._width * index,
		});

		
	},


});



